<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- https://www.baidu.com -->
    <!-- <form action="./login.html" method="get">
        <p>
            <label for="user">用户名:</label>
             name => 数据的字段名（键名） value => 对于的键值
            <input type="text" name="user">
        </p>
        <p>
            <label for="pwd">密&emsp;码:</label>
            <input type="text" name="pwd">
        </p>
        <p>
            <label for="phone">手机号:</label>
            <input type="text" name="phone">
        </p>
        <p>
            <label for="email">邮&emsp;箱:</label>
            <input type="text" name="email">
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form> -->

    <!-- 表单提交往往伴随着页面跳转 => 用户体验不好 -->
    <!-- 通过JS获取表单的数据 手动提交  1. js取值 2.js跳转(携带数据 拼接字符串)  -->
    <div class="form">
        <p>
            <label for="user">用户名:</label>
            <input type="text" name="user">
        </p>
        <p>
            <label for="pwd">密&emsp;码:</label>
            <input type="text" name="pwd">
        </p>
        <p>
            <label for="phone">手机号:</label>
            <input type="text" name="phone">
        </p>
        <p>
            <label for="email">邮&emsp;箱:</label>
            <input type="text" name="email">
        </p>
        <p>
            <input class="submit" type="submit" value="提交">
            <input class="reset" type="reset" value="重置">
        </p>
    </div>


</body>
<script>
    // JS提交   

    var submitBtn = document.getElementsByClassName("submit")[0];

    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var phoneInp = document.getElementsByName("phone")[0];
    var emailInp = document.getElementsByName("email")[0];


    submitBtn.onclick = function () {
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;
        // http://127.0.0.1:5500/day11/html/login.html?user=zxczxc&pwd=123123&phone=17386141516&email=1272071496%40qq.com
        if (user && pwd && phone && email) {
            // location.href = "./login.html?user=" + user + "&pwd=" + pwd + "&phone=" + phone + "&email=" + email;
            location.href = `./login.html?user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`;
        } else {
            alert("请传入完整信息");
        }
    }








</script>


</html>